介面的應用

定義

• 介面是用來描述物件或類別的結構，以日常生活中為例，最常應用的例子是電源插銷和插座。
• 將插座視為介面，所有要使用交流電驅動的電器皆需要提供一個插銷來調配插座，而插銷則視作電器對插座介面的實現。
• 在TypeScript中我們使用Interface為提供獨立功能的模組定義介面，物件及類別透過實現介面來為這些功能提供具體支援。

interface Tips{
    label:string,
    color?:string,
    [propName:string]: number | string | undefined
}
var circle:Tips = {
    label:"圓形",
    radius:3
};
var rectangle:Tips = {
    label:"矩形",
    width:100,
    height:100
}
descLog(circle);
descLog(rectangle);

• 在上面這個例子中，Tips介面約定了一個字串類型的label屬性，而circle和rectangle物件都對此進行實現，descLog是列印函數，它所要求的參數必須為實現Tips介面的物件。
• color屬性的部分color?:string表示它是可選的。
• 當一個物件需要實現多個介面、擁有介面之外的屬性時，可以為介面新增一個字串索引簽名，指定額外的屬性只需滿足約定的類型即可。最後面的undefined是因為如果實現此介面的物件不提供color屬性的實現時，則color屬性的值就是undefined的。
• 另外介面中定義的屬性也支援新增readonly修飾，若使用readonly則表示當前屬性被宣告為唯讀屬性，
  只有物件建立時可以為此屬性賦值，之後不再允許修改。

約定函數

物件不僅可以約束物件的結構，還能約束函數。

interface RectangleAreaMethod {
    (width: number, height: number): number
}
let func:RectangleAreaMethod = function(w: number, h:number){
    return w * h;
}
let func2:(w:number, h:number)=>number = function(w:number, h:number){
    return w * h;
}

• 這段程式中func和func2變數所賦值的函數、作用是一樣的，使用介面會使函數的類型更加簡潔。
• 函數本身也是物件，同樣可以定義額外的屬性，此時實現此介面的函數可作為函數直接呼叫，也可向標準物件一樣進行屬性存取。

可索引類型

陣列、字典都是可索引的類型，我們可以透過陣列下標、字典key名稱索引到值。

interface JArray {
    [index: number]: string
}
interface JDictionary{
    [key: string]: string
}
let arr: JArray = ["a", "b", "c"];
let map: JDictionary = {
    "a":"A",
    "b":"B"
}
console.log(arr[1]);     //b
console.log(map["a"]);   //A

• 陣列key是遞增的數值型態，而字典的key則是字串類型。
• 若希望可索引物件內的資料不能被修改，同樣可加上readonly即可。

今天的內容就先到這邊，明天將會介紹用介面來約束類別！